<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Basic Window - jQuery EasyUI Demo</title>
        <link type="text/css" rel="stylesheet" href="../../../easyui-1.11.3/themes/bootstrap/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../extend/themes/icon.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
        <!--<script type="text/javascript" src="../../extend/jquery.easyui.window.extend.js"></script>-->
        <script type="text/javascript" src="../../jquery.easyui.extensions.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../../syntaxhighlighter/styles/shCoreDefault.css">
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushJScript.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>
        <script type="text/javascript">
            SyntaxHighlighter.config.tagName = "textarea";
            SyntaxHighlighter.all();
        </script>
        <script type="text/javascript">
            $(function(){
                $('#dg').datagrid({
                    columns:[[
                        {checkbox: true},
                        {field: 'itemid', width: 80, title: 'Item ID', sortable: true},
                        {field: 'productid', width: 100, title: 'Product ID'},
                        {field: 'productname', width: 100, title: 'Product'},
                        {field: 'listprice', width: 80, align: 'right', title: 'List Price', sortable: true},
                        {field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'},
                        {field: 'attr1', width: 250, title: 'Attribute'},
                        {field: 'status', width: 60, align: 'center', title: 'Status', hidden: true}
                    ]],
                    singleSelect: true,
                    rownumbers: true,
                    url: '../window/datagrid_data1.json',
                    height: 250,
                    width: 700,
                    toolbar:[{
                        text: 'Edit',
                        iconCls: 'icon-edit',
                        handler: doEdit
                    }]
                });
            });

            function doEdit(){
                var row = $('#dg').datagrid('getSelected');
                if(row){
                    $.showWindow({
                        title: 'Edit',
                        useiframe: true,
                        content: 'url:../demo_ext/window/_content2.html',
                        data:{record: row, datagrid: $('#dg')},
                        buttons:[{
                            text: 'OK',
                            iconCls: 'icon-ok',
                            handler: 'doOK' //此方法在_content2.html中
                        },{
                            text: 'Cancel',
                            iconCls: 'icon-cancel',
                            handler: function(win){
                                win.close();
                            }
                        }],
                        onLoad: function(win, body){
                            //window打开时调用，初始化form内容
                            if(body){
                                body.doInit(win);
                            }
                        }
                    });
                }else{
                    $.messager.alert('警告','请选择要编辑的行。','warning');
                }
            }
        </script>
    </head>
    <body>
        <!--<h3>父页面与window之间传值演示</h3>-->
        <!--<p>window使用iframe加载指定页面</p>-->
        <!--<table id="dg"></table>-->



        <div class="easyui-tabs" data-options="fit:true, plain: true">
            <div data-options="title: 'Demo'">
                <h3>父页面与window之间传值演示</h3>
                <p>window使用iframe加载指定页面</p>
                <table id="dg"></table>
            </div>
            <div data-options="title: 'Code'" style="font-size: 14px;">
                <p>javascript:</p>
                <textarea class="brush: js; highlight: [31,32,33,37,41,42,43,45,46,47,48,49,50]">
                        $(function(){
                            $('#dg').datagrid({
                                columns:[[
                                    {checkbox: true},
                                    {field: 'itemid', width: 80, title: 'Item ID', sortable: true},
                                    {field: 'productid', width: 100, title: 'Product ID'},
                                    {field: 'productname', width: 100, title: 'Product'},
                                    {field: 'listprice', width: 80, align: 'right', title: 'List Price', sortable: true},
                                    {field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'},
                                    {field: 'attr1', width: 250, title: 'Attribute'},
                                    {field: 'status', width: 60, align: 'center', title: 'Status', hidden: true}
                                ]],
                                singleSelect: true,
                                rownumbers: true,
                                url: '../window/datagrid_data1.json',
                                height: 250,
                                width: 700,
                                toolbar:[{
                                    text: 'Edit',
                                    iconCls: 'icon-edit',
                                    handler: doEdit
                                }]
                            });
                        });

                        function doEdit(){
                            var row = $('#dg').datagrid('getSelected');
                            if(row){
                                $.showWindow({
                                    title: 'Edit',
                                    useiframe: true,
                                    content: 'url:../demo_ext/window/_content2.html',
                                    data:{record: row, datagrid: $('#dg')},
                                    buttons:[{
                                        text: 'OK',
                                        iconCls: 'icon-ok',
                                        handler: 'doOK' //此方法在_content2.html中
                                    },{
                                        text: 'Cancel',
                                        iconCls: 'icon-cancel',
                                        handler: function(win){
                                            win.close();
                                        }
                                    }],
                                    onLoad: function(win, body){
                                        //window打开时调用，初始化form内容
                                        if(body){
                                            body.doInit(win);
                                        }
                                    }
                                });
                            }else{
                                $.messager.alert('警告','请选择要编辑的行。','warning');
                            }
                        }
                </textarea>

                <p>html:</p>
                <textarea class="brush: html;">
                    <body>
                        <h3>父页面与window之间传值演示</h3>
                        <p>window使用iframe加载指定页面</p>
                        <table id="dg"></table>
                    </body>
                </textarea>
            </div>
            <div data-options="title: '_content2.html'" style="font-size: 14px;">
                <p>javascript:</p>
                <textarea class="brush: js; highlight:[1,2,3,4,5,6,7,8,10,11,12,13,14,15,16,17,18,19,20,21]">
                        function doInit(win){
                            var record = win.getData('record');
                            $('#itemid').val(record.itemid);
                            $('#productname').val(record.productname);
                            $('#attr1').val(record.attr1);
                            $('#listprice').val(record.listprice);
                            $('#unitcost').val(record.unitcost);
                        }

                        function doOK(win){
                            var target = win.getData('datagrid');
                            var row = win.getData('record');
                            var index = target.datagrid('getRowIndex', row);
                            target.datagrid('updateRow',{
                                index: index,
                                row: {
                                    listprice: $('#listprice').val(),
                                    unitcost: $('#unitcost').val()
                                }
                            });
                            win.close();
                        }
                </textarea>
                <p>html:</p>
                <textarea class="brush: html;">
                    <body>
                        <div class="window-form">
                            <h3>我是一个由iframe加载的页面</h3>
                            <div>
                                <label class="form-label">Item ID:</label>
                                <input type="text" id="itemid" readonly>
                            </div>
                            <div>
                                <label class="form-label">Product:</label>
                                <input type="text" id="productname" readonly>
                            </div>
                            <div>
                                <label class="form-label">Attribute:</label>
                                <input type="text" id="attr1" readonly>
                            </div>
                            <div>
                                <label class="form-label">List Price:</label>
                                <input type="text" id="listprice">
                            </div>
                            <div>
                                <label class="form-label">Unit Cost:</label>
                                <input type="text" id="unitcost">
                            </div>
                        </div>
                    </body>
                </textarea>
            </div>
        </div>

    </body>
</html>